<template>
  <div>


    <HeaderVue @searchTransfer="searchParent"></HeaderVue>
    <ShowTableVue :tableData="tableData" @resetTable="getTable()"></ShowTableVue>
    <PagenationVue :page="page" :pageSize="pageSize" :title="title" @SizeChangeTransfer="SizeChange" @CurrentChangeTransfer="CurrentChange"></PagenationVue>
    <Dialog @addDataTransfer="getTable()" @modifyDataTransfer="getTable()"></Dialog>

  </div>
</template>

<script>

import HeaderVue from "./physocaComponents/Header.vue";
import ShowTableVue from "./physocaComponents/ShowTable.vue";
import PagenationVue from "./physocaComponents/Pagenation.vue";
import Dialog from "./physocaComponents/Dialog.vue";

import { getTableData } from "../../api/physicaAPI";

export default {
  components: {
    HeaderVue,
    ShowTableVue,
    PagenationVue,
    Dialog
  },
  data() {
    return {
      tableData: [],
      keyWord:"",
      page:1,
      pageSize:20,
      title:0
      
    };
  },
  mounted() {
   this.getTable();
  },
  methods: {
    CurrentChange(val){
      this.page=val
       this.getTable()
    },
    SizeChange(val){
     this.pageSize=val
     this.getTable()
    },
    searchParent(val){
      this.keyWord=val
      this.getTable()
    },
    getTable() {
      let parmas={
        keyWord:this.keyWord,
        page:this.page,
        pageSize:this.pageSize
      }
      getTableData(parmas).then(res => {
        if (res.code == 200) {
          this.tableData = res.data;
          this.title=res.title
        }
      });
    }
  }
};
</script>

<style>




</style>